@layout("/common/_container.html"){
<div class="layui-card" style="height: 105%">
    <div class="layui-card-body" id="mapDiv" style="height: 100%">
    	<div class="layui-form" style="position:absolute;top:15px; left:10px; z-index:1000;">
	    	<div class="layui-inline">
		    	<div class="layui-input-inline">
		    		 <select name="account" lay-search lay-filter="changeAccount">
					  <option value="">差分账号查询</option>
					  @for(account in accountList){
		              <option value="${account.account}">${account.account}</option>
		              @}
					</select> 
		    	</div>
		    </div>
	    </div>
	    
	    <div class="layui-form" style="position:absolute;top:15px; right:0px; z-index:1000;">
		    <div class="layui-form-item">
	          <div class="layui-inline">
	            <select name="province" id="provinces"  lay-filter="changeProvince">
			       <option>请选择省</option>
			    </select>
	          </div>
	          <div class="layui-inline">
	            <select name="city" id="citys"  lay-filter="changeCity">
			       <option>请选择市</option>
			    </select>
	          </div>
		    </div>
	    </div>
    
    
	    <div class="layui-form" style="position:absolute;bottom:0px; right:0px; z-index:1000;">
		  <div class="layui-form-item">
	          <div class="layui-inline">
	            <select name="online" lay-search lay-filter="changeOnline">
	              <option value="">在线账号</option>
	              @for(online in onlineList){
	              <option value="${online}">${online}</option>
	              @}
	            </select>
	          </div>
		  </div>
		</div>
    </div>
    
    <div id="administrativeMsg" style="font-size:14px"></div>
</div>

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=1ba730719590185255eb3bf61dfd70a6" type="text/javascript"></script>
<script>
layui.config({
	base: Feng.ctxPath + "/static/layuiadmin/" //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'layer','table', 'form','laydate'],function(){
	
	var $ = layui.$
  	,form = layui.form
  	,table = layui.table
	,laydate=layui.laydate;
	
	var province = "陕西",
	city = "西安";
	
	var provinceAry = ChinaCity.getProvince();
	var provinceStr = "";
	$.each(provinceAry,function(idx,val){ 
		provinceStr += '<option value="' + val + '">' + val + '</option>';
	});
	$("#provinces").html(provinceStr);
	$("#provinces").val(province);
	
	var cityAry = ChinaCity.getCity(province);
	var cityStr = "";
	$.each(cityAry,function(idx,val){ 
		cityStr += '<option value="' + val + '">' + val + '</option>';
	});
	$("#citys").html(cityStr);
	$("#citys").val(city);
	form.render('select');
	
	
	
	
	form.on('select(changeProvince)', function(data){
	    var province = data.value;
		var cityAry = ChinaCity.getCity(province);
		var str = "<option value=''>请选择</option>";
		$.each(cityAry,function(idx,val){ 
			str += '<option value="' + val + '">' + val + '</option>';
		});
		$("#citys").html(str);
		$("#citys").val("");
		form.render('select');
	});
	
	form.on('select(changeCity)', function(data){
	  	city = data.value;
	    //创建对象
		var administrative = new T.AdministrativeDivision();
		var config = {
			needSubInfo: false,
			needAll: false,
			needPolygon: true,
			needPre: true,
			searchType: 1,
			searchWord: city
		};
		administrative.search(config, searchResult);
	});
	
	
	form.on('select(changeAccount)', function(data){
	  	var account = data.value;
	    //根据账号查询位置坐标
	    var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	  	var ajax = new $ax(Feng.ctxPath + "/locat/position", function (data) {
            console.log(data.data.Latitude);
            var center = new T.LngLat(116.63072 ,40.054952);
            marker = new T.Marker(center);// 创建标注
            map.addOverLay(marker);
            var infoWin1 = new T.InfoWindow();
            var sContent =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
                "</div>" +
                "</div>";
            infoWin1.setContent(sContent);
            marker.addEventListener("click", function () {
                marker.openInfoWindow(infoWin1);
            });// 将标注添加到地图中
            layer.close(loadingIndex);
        }, function (data) {
            Feng.error("查询失败!" + data.responseJSON.message + "!");
        });
        ajax.set("account", account);
        ajax.start();
	});
	
	
	form.on('select(changeOnline)', function(data){
	  	var online = data.value;
	    //根据账号查询位置坐标
	    var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	  	var ajax = new $ax(Feng.ctxPath + "/locat/position", function (data) {
            console.log(data.data.Latitude);
            var center = new T.LngLat(116.63072 ,40.054952);
            marker = new T.Marker(center);// 创建标注
            map.addOverLay(marker);
            var infoWin1 = new T.InfoWindow();
            var sContent =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
                "</div>" +
                "</div>";
            infoWin1.setContent(sContent);
            marker.addEventListener("click", function () {
                marker.openInfoWindow(infoWin1);
            });// 将标注添加到地图中
            layer.close(loadingIndex);
        }, function (data) {
            Feng.error("查询失败!" + data.responseJSON.message + "!");
        });
        ajax.set("account", online);
        ajax.start();
	});
	
	
	var map; 
	var zoom = 12; 
	var administrative;
	//初始化地图对象 
   	map=new T.Map("mapDiv"); 
   	//设置显示地图的中心点和级别 
	map.centerAndZoom(new T.LngLat(116.40969,39.89945),zoom); 
	 
	//创建对象
	administrative = new T.AdministrativeDivision();
	var config = {
		needSubInfo: false,
		needAll: false,
		needPolygon: true,
		needPre: true,
		searchType: 1,
		searchWord: city
	};
	administrative.search(config, searchResult);
	
	
	function searchResult(result){
		if(result.getStatus() == 100) {
			var data = result.getData();
			showMsg(data);
		}else {
			result.getMsg();
		}
	}
	
	function showMsg(data){
		for(var i = 0; i < data.length; i++){
			if(data[i].points){
				//绘制行政区划
				polygon(data[i].points);
				//显示行政区划下的所有坐标点
				var pointArray = data[i].points[0].region.split(',');
				var polygonArray = []
			    for (var index in pointArray) {
			        var item = pointArray[index]
			        var point = item.split(' ');
			        if (point.length == 2) {
			            point['lng'] = parseFloat(point[0])
			            point['lat'] = parseFloat(point[1])
			            polygonArray.push(point)
			        }
			    }
				
				var ajax = new $ax(Feng.ctxPath + "/locat/allpositon", function (data) {
					var positions = data.data;
					for (var index in data.data){
						var lng = positions[index].Longitude;
						var lat = positions[index].Latitude;
						if(isPointInPolygon(polygonArray, lng, lat)){
							//在区域内则添加坐标点
							var center = new T.LngLat(lng ,lat);
					        marker = new T.Marker(center);// 创建标注
					        map.addOverLay(marker);
						}
					}
					
	            }, function (data) {
	                 Feng.error("查询失败!" + data.responseJSON.message + "!");
	            });
	            ajax.start();
			}
		}
	}
	
	function polygon(points){
		//先清除原来的行政区划
		map.clearOverLays();
		var pointsArr = [];
        for (var i = 0; i < points.length; i++) {
            var regionLngLats = [];
            var regionArr = points[i].region.split(",");
            for (var m = 0; m < regionArr.length; m++) {
                var lnglatArr = regionArr[m].split(" ");
                var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                regionLngLats.push(lnglat);
                pointsArr.push(lnglat);
            }
          	//创建面对象
	        var polygon = new T.Polygon(regionLngLats,{color: "blue", weight: 3, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0.3});
	      	//向地图上添加行政区划面
	        map.addOverLay(polygon);
        }
        //显示最佳比例尺
        map.setViewport(pointsArr);
	}
	
	/**
	 * 某个点是否在某个区域
	 */
	 function isPointInPolygon(polygon, lng, lat) {
	    var numberOfPoints = polygon.length;
	    var polygonLats = [];
	    var polygonLngs = [];
	    for (var i = 0; i < numberOfPoints; i++) {
	        polygonLats.push(polygon[i]['lat']);
	        polygonLngs.push(polygon[i]['lng']);
	    }
	    var polygonContainsPoint = false;
	    for (var node = 0, altNode = (numberOfPoints - 1); node < numberOfPoints; altNode = node++) {
	        if ((polygonLngs[node] > lng != (polygonLngs[altNode] > lng))
	            && (lat < (polygonLats[altNode] - polygonLats[node])
	                * (lng - polygonLngs[node])
	                / (polygonLngs[altNode] - polygonLngs[node])
	                + polygonLats[node]
	            )
	        ) {
	            polygonContainsPoint = !polygonContainsPoint;
	        }
	    }
	    return polygonContainsPoint;
	}
});
</script>
@}